<template>
  <div class="app">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="yuansdj">
              <div class="yuansdj_heds">参与用户分析</div>
              <div style="font-size:17px;margin:15px 0px 15px 30px">竞猜价格分布图:</div>
              <div id="sector" style="width:350px;height:350px;margin:0 auto;"></div>
              <div style="font-size:17px;margin:15px 0px 15px 30px">用户年龄划分:</div>
              <div id="histogram" style="width:400px;height:400px;margin:0 auto;"></div>
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {};
  },
  mounted() {
    this.userSex();
  },
  methods: {
    userSex() {
      var myChart = this.$echarts.init(document.getElementById("sector"));
      var myChart1 = this.$echarts.init(document.getElementById("histogram"));
      //扇形
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ["rgb(154,175,219)", "rgb(252,158,136)"],
        legend: {
          orient: "vertical",
          left: "right",
          data: ["男性", "女性"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 50, name: "男性" },
              { value: 100, name: "女性" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      //柱状
      let option1 = {
        xAxis: {
          type: "category",
          data: ["18", "18-24", "25-30", "31-40", "41-50", "51-60", ">60"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [10, 15, 18, 16, 20, 30, 40],
            type: "bar",
            itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: 'black',
                               fontSize: 16
                           }
                       }
                   }
               }
            }
        ]
      };

      myChart.setOption(option);
      myChart1.setOption(option1);
    }
  }
};
</script>
<style scoped>
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}

.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
.yuansdj_heds {
  font-size: 20px;
  border-bottom: solid 1px rgb(220, 220, 220);
  text-align: center;
  padding: 10px 0px;
}
</style>